<template>
    <div class="OrganizationPage">
        <aside-page @getOrganization="getOrganization"></aside-page>
        <div class="right">
            <div class="top">
                <h3>机构信息</h3>
                <div class="desc">
                    <el-form :model="form">
                        <div class="row">
                            <div class="col">
                                <el-form-item label-width="68px" label="机构名称">
                                    <el-input :value="form.name" disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="col">
                                <el-form-item label-width="68px" label="机构类型">
                                    <el-select :value="form.type" placeholder="请选择" disabled>
                                        <el-option
                                            v-for="item in organizationType"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="col">
                                <el-form-item label-width="68px" label="机构编号">
                                    <el-input :value="form.id" disabled></el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <el-form-item label-width="68px" label="机构地址">
                                    <el-select v-model="area.provinceId" @change="areaChange($event, 1)"
                                               placeholder="省份" :disabled="isDisabled">
                                        <el-option
                                            v-for="item in province"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="col">
                                <el-form-item label-width="68px" label="详细地址">
                                    <el-input v-model="form.address" :disabled="isDisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div class="col">
                                <el-form-item label-width="68px" label="责任管理">
                                    <el-input v-model="form.managerName" :disabled="isDisabled"></el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <el-form-item label-width="68px">
                                    <el-select v-model="area.cityId" @change="areaChange($event, 2)" placeholder="城市"
                                               :disabled="isDisabled">
                                        <el-option
                                            v-for="item in city"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>

                            <div class="col">
                                <el-form-item label-width="68px" label="经度">
                                    <el-input :value="form.longitude" disabled>
                                        <span slot="suffix">E</span>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <div class="col">
                                <el-form-item label-width="68px" label="机构电话">
                                    <el-input v-model="form.phone" :disabled="isDisabled"></el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <el-form-item label-width="68px">
                                    <el-select v-model="area.countyId" @change="areaChange($event, 3)"
                                               placeholder="区县" :disabled="isDisabled">
                                        <el-option
                                            v-for="item in county"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>

                            <div class="col">
                                <el-form-item label-width="68px" label="维度">
                                    <el-input :value="form.latitude" disabled>
                                        <span slot="suffix">N</span>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <div class="col btn-col">
                                <el-button class="btn" type="primary" @click="btnClick">编辑机构信息</el-button>
                            </div>
                        </div>

                    </el-form>
                </div>
            </div>
            <div class="bottom">
                <h3>员工信息</h3>
                <div class="list">
                    <template>
                        <el-table
                            stripe
                            :data="tableList"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="员工姓名">
                            </el-table-column>
                            <el-table-column
                                min-width="100"
                                prop="mobile"
                                label="手机号">
                            </el-table-column>
                            <el-table-column
                                prop="status"
                                label="账号状态">
                                <template slot-scope="scope">
                                    <span class="tag" :class="scope.row.status === 1 ? 'tag_1' : 'tag_0'"></span>
                                    <div class="status">{{ scope.row.status === 1 ? '正常' : '停用' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                min-width="160"
                                prop="userId"
                                label="员工编号">
                            </el-table-column>
                            <el-table-column
                                min-width="90"
                                prop="agency.name"
                                label="所属机构">
                            </el-table-column>
                            <el-table-column
                                min-width="100"
                                prop="account"
                                label="系统账号">
                            </el-table-column>
                            <el-table-column
                                prop="roleNames"
                                label="系统角色">
                            </el-table-column>
                        </el-table>
                    </template>

                    <el-pagination
                        background
                        :hide-on-single-page="Math.ceil(total / pageSize) <= 1"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page="page"
                        :page-sizes="[5, 10, 20]"
                        :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import AsidePage from '@/components/Aside.vue'
import { editOrganizationItem, getArea, getOrganizationList } from '@/api/data-management'

export default {
    name: 'OrganizationPage',
    components: { AsidePage },
    mounted () {
        this.$store.commit('setPageLoading', false)
    },
    data () {
        return {
            isDisabled: true,
            form: {},
            province: [],
            city: [],
            county: [],
            area: {},
            organizationType: [{ value: 1, label: '一级转运中心' }, { value: 2, label: '二级转运中心' }, {
                value: 3,
                label: '三级转运中心'
            }],
            tableList: [],
            page: 1,
            pageSize: 5,
            total: 0,
        }
    },
    methods: {
        async getOrganization (data) {
            this.form = data
            this.province = await this.getArea(0)
            this.city = await this.getArea(data.province.id)
            this.county = await this.getArea(data.city.id)

            this.page = 1
            await this.renderList ()

            this.$set(this.area, 'provinceId', data.province.id)
            this.$set(this.area, 'cityId', data.city.id)
            this.$set(this.area, 'countyId', data.county.id)
        },
        btnClick (e) {
            const node = e.target
            if (this.form.id) {
                if (this.isDisabled) {
                    node.innerHTML = '保存编辑'
                    node.classList.add('save')
                    this.isDisabled = false
                } else {
                    node.innerHTML = '编辑机构信息'
                    node.classList.remove('save')
                    this.isDisabled = true
                    this.editOrganization(this.form, this.area)
                }
            } else {
                this.$message.warning('无数据可修改')
            }
        },
        async getArea (pid) {
            const res = await getArea(pid)
            return res.data.data.map(e => {
                return {
                    value: e.id,
                    label: e.name
                }
            })
        },
        async editOrganization (data, area) {
            const res = await editOrganizationItem({
                address: data.address,
                extra: data.extra,
                id: data.id,
                latitude: data.latitude,
                longitude: data.longitude,
                managerName: data.managerName,
                name: data.name,
                parent: data.parent,
                parentId: data.parentId,
                phone: data.phone,
                status: data.status,
                type: data.type,
                provinceId: area.provinceId,
                cityId: area.cityId,
                countyId: area.countyId
            })
            if (res.data.msg === 'ok') {
                this.$message.success('修改成功')
            } else {
                this.$message.error('修改失败')
            }
        },
        async areaChange (e, type) {
            if (type === 1) {
                this.city = []
                this.county = []
                this.area.cityId = ''
                this.area.countyId = ''
                this.city = await this.getArea(e)
            }
            if (type === 2) {
                this.county = []
                this.area.countyId = ''
                this.county = await this.getArea(e)
            }
        },
        async renderList () {
            const res = await getOrganizationList({
                page: this.page,
                pageSize: this.pageSize,
                agencyId: this.form.id
            })
            this.total = +res.data.data.counts
            this.tableList = []
            this.tableList = res.data.data.items
        },
        sizeChange(val) {
            console.log(val)
            this.pageSize = val
            this.page = 1
            this.renderList()
        },
        currentChange(val) {
            this.page = val
            this.renderList()
        }
    }
}
</script>

<style scoped lang="scss">
.OrganizationPage {
    display: flex;
    overflow: auto;

    .right {
        flex: 1;
        margin: 12px;
        min-width: 850px;

        > div {
            background-color: white;
            border-radius: 5px;
            color: #2A2929;

            h3 {
                height: 55px;
                font-size: 16px;
                font-weight: bold;
                line-height: 55px;
                background-color: #FAFAFA;
                border-bottom: 1px solid #EBEEF5;
                border-radius: 5px 5px 0 0;
                padding-left: 20px;
                margin: 0;
            }
        }

        .top {
            margin-bottom: 24px;

            .desc {
                padding: 24px;

                .row {
                    display: flex;

                    .col {
                        padding: 0 20px;
                        flex: 1;

                        .btn {
                            width: 159px;
                            height: 40px;
                            font-size: 14px;
                            background: #FFEEEB;
                            border: 1px solid #F3917C;
                            color: #E15536;

                            &:hover {
                                background-color: #FFE2DD;
                            }
                        }

                        .save {
                            color: white;
                            background: #FF6B4A !important;

                            &:hover {
                                background-color: #FF7A5C !important;
                            }
                        }

                        ::v-deep .el-input span {
                            color: #2A2929;
                            margin-right: 4px;
                        }
                    }

                    .btn-col {
                        display: flex;
                        justify-content: right;
                        align-items: center;
                    }
                }

                ::v-deep .el-form-item {
                    margin: 10px 0;

                    .el-select {
                        width: 100%;
                    }

                    .el-form-item__label {
                        font-size: 14px;
                        font-weight: bold;
                        color: #2A2929;
                    }

                    .el-input__inner {
                        text-overflow: ellipsis;
                    }

                    input{
                        color: #606266;
                    }
                }
            }
        }

        .bottom {
            .list {
                padding: 22px;

                ::v-deep .el-table {
                    border-top: 1px solid #EBEEF5;
                    border-left: 1px solid #EBEEF5;
                    border-right: 1px solid #EBEEF5;

                    table tbody {
                        color: #2A2929;
                        font-size: 13px;

                        .el-table__row {
                            td:nth-child(4) {
                                .cell {
                                    display: flex;
                                    justify-content: start;
                                    align-items: center;

                                    .tag {
                                        display: block;
                                        width: 6px;
                                        height: 6px;
                                        border-radius: 3px;
                                        margin-right: 6px;
                                    }

                                    .tag_1 {
                                        background-color: #67C23A;
                                    }
                                    .tag_0 {
                                        background-color: #F56C6C;
                                    }
                                }
                            }
                        }
                    }
                }

                ::v-deep .el-pagination {
                    margin-top: 22px;
                }
            }
        }
    }
}
</style>
